<!--
 * @fileOverview: 确认订单页面留言组件
 * @author: JieXu
 * @date: 2021/01/05 10.05
 * @lastEditors: JieXu
 * @lastEditDate: 2021/01/06 09.35
-->
<template>
    <div class="MB2 leave-word">
      <div class="label">{{t('leaveWord_message')}}</div>
      <div class="inputTxt">
        <input v-model="showValue" style="text-align:right" maxlength="50" @blur="onLoseFocus" @focus="onObtainFocus"
          :placeholder='t("leaveWord_message_placeholder")' @input="onPassValue" />
      </div>
    </div>
  </template>
  <script>
  import { isIos } from "../../utils/checkEnv";
  import locale from "../../../../mixins/locale";

  export default {
    model: {
      prop: "remark",
      event: 'change'
    },
    mixins: [locale],
    props: {
      remark: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        hiddenValue: "", //真实的留言
        showValue: "", //处理后的留言
        eleFocus: "", //获取焦点的元素
      };
    },
    mounted() {
      this.showValue = this.remark;
      this.hiddenValue = this.remark;
      this.onMonitorKeyboard();
    },
    methods: {
      //失去焦点
      onLoseFocus() {
        let that = this;
        that.hiddenValue = this.showValue;
        that.showValue.length > 20
          ? (that.showValue = that.showValue.slice(0, 20) + "...")
          : that.showValue;
      },
      //获得焦点
      onObtainFocus(e) {
        this.showValue = this.hiddenValue;
        //获取焦点时，光标定位到最后
        let content = e.target;
        content.focus();
        var len = this.hiddenValue.length;
        if (document.selection) {
          var sel = content.createTextRange();
          sel.moveStart("character", len);
          sel.collapse();
          sel.select();
        } else if (
          typeof content.selectionStart == "number" &&
          typeof content.selectionEnd == "number"
        ) {
          setTimeout(() => {
            content.selectionStart = content.selectionEnd = len;
          }, 200);
        }
        this.eleFocus = e.target;
        //ios系统中弹出软键盘，将提交按钮移到软键盘上方
        if (isIos) {
          setTimeout(function () {
            document.body.scrollTop = document.body.scrollHeight;
          }, 0);
        }
      },
      //限制留言字数并传值
      onPassValue() {
        this.hiddenValue = this.showValue;
        if (this.hiddenValue.length === 50) {
          //如果是ios环境，则在底部提示
          if (isIos) {
            this.$toast({
              message:  this.t('leaveWord_words_reached_limit'),
              position: "bottom",
            });
          } else {
            this.$toast( this.t('leaveWord_words_reached_limit'));
          }
        }
        this.$emit("change", this.hiddenValue);
      },
      //屏幕滚动
      onscroll(ele) {
        setTimeout(function () {
          ele.scrollIntoView(false);
          // true:元素的顶端将和其所在滚动区的可视区域的顶端对齐; false:底端对齐。
        }, 0);
      },
      //监听软键盘弹出和收回事件
      onMonitorKeyboard() {
        let originalHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        window.onresize = () => {
          let resizeHeight =
            document.documentElement.clientHeight || document.body.clientHeight;
          if (resizeHeight - 0 >= originalHeight - 0) {
            //当软键盘收起，在此处操作
            this.eleFocus != "" && this.onscroll(this.eleFocus);
            this.eleFocus.blur();
            this.eleFocus = "";
          }
        };
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  @import "../../assets/styles/global.scss";
  @import "../../assets/styles/common.scss";
  .leave-word {
    display: flex;
    align-items: center;
    padding: .26rem .3rem;
    justify-content: space-between;
    background: #ffffff;
    font-size: 0.28rem;
  
    ::-webkit-input-placeholder {
      /* WebKit, Blink, Edge */
      color: #ccc;
    }
  
    :-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #ccc;
    }
  
    ::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #ccc;
    }
  
    :-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: #ccc;
  
    }
  
    .inputTxt {
      input {
        border: none;
        width: 4rem;
      }
    }
  }
  </style>
  